<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-20 15:47:18
 * @LastEditors: icymoon911 icymoon911@163.com
 * @LastEditTime: 2024-07-09 22:33:19
 * @FilePath: \ken147258.topayClient\src\views\other\payee-management\components\ChannelsChange.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div overflow-hidden class="app-container" v-loading="loading">
    <div class="search-container">
      <FormList :initForm="initSearchForm" v-model:formModel="searchForm"></FormList>
    </div>
    <comTable :data="tableDatasCom" :config="tableconfig" :tableHeader="tableHeader">
      <template #rate="{ row, index }">
        <el-input-number
          v-model="row.rate"
          :precision="2"
          :step="0.1"
          :min="0"
          :max="100"
          @input="(currentValue) => handleRageChange(currentValue, row, index)"
        />
        <el-button
          ml-10px
          v-show="row.isEdit"
          type="success"
          icon="check"
          size="small"
          @click="handleRateSave(row.rate, row, index)"
        />
      </template>
      <template #status="{ row, index }">
        <el-switch
          v-model="row.statueCom"
          active-text="开启"
          inactive-text="关闭"
          inline-prompt
          @change="(val) => handleStatusChange(val, row, index)"
        ></el-switch>
      </template>
    </comTable>
  </div>
</template>

<script lang="ts" setup>
import { pro_modify, pro_list as list } from "@/api/other/merchant";

const props = defineProps({
  id: {
    required: true,
  },
  type: {
    type: String,
    required: true,
  },
});

const searchForm = ref({});
const initSearchForm = ref({
  // 表单标签位置
  // labelPosition: "right",
  formAttrs: {
    // 是否内联
    inline: true,
  },
  rowAttrs: {
    // 行内表单数量
    columnsNum: 4,
  },
  // 初始化表单字段
  initKeys: [
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "pro_id",
      // 表单属性
      formAttrs: {
        label: "编号",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入编码",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "pro_name",
      // 表单属性
      formAttrs: {
        label: "渠道名称",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入渠道名称",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "pass_code",
      // 表单属性
      formAttrs: {
        label: "通道代码",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入通道代码",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "buttons",
      // 按钮
      btns: [
        {
          // 文本
          text: "搜索",
          // 控制属性
          controlAttrs: {
            // 类型
            type: "primary",
            icon: "search",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: (e: Event, formRef: FormInstance, data: Array<object>) => {
              formRef.validate((valid) => {
                if (valid) {
                  let tempData = { ...data };

                  tableDatasObj.value.queryParams = tempData;

                  handleQuery();
                }
              });
            },
          },
        },
        {
          // 文本
          text: "重置",
          // 控制属性
          controlAttrs: {
            icon: "refresh",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: resetQuery,
          },
        },
      ],
    },
  ],
});

const loading = ref(false);

const tableDatasObj = ref({
  list: [],
  queryParams: {},
});
const tableconfig = {
  // tableHeight: 480, //表格高度
  isSelection: false, //显示复选框
  isRowClick: false, //使用行点击
  isStripe: true, //隐藏斑马纹，与背景色不可同时用
  isShowSummary: false, //显示共计
  isIndex: true, //自定义序号
  isNeedPagination: false, //是否需要分页
};
const tableHeader = [
  { label: "编号", prop: "pro_id", width: 100 },
  { label: "通道名称", prop: "pro_name" },
  { label: "通道代码", prop: "pass_code", width: 300 },
];

const tableDatasCom = computed(() => {
  return (tableDatasObj.value.list || []).map((item) => {
    return {
      ...item,
      statueCom: item.status.toString() === "1",
    };
  });
});

async function init() {
  tableHeader.push({ label: "状态", prop: "status", width: 160, type: "slot" });
  tableHeader.push({ label: "通道费率%", prop: "rate", width: 260, type: "slot" });

  // if (props.type == "rate") {
  //   tableHeader.push({ label: "通道费率%", prop: "rate", width: 260, type: "slot" });
  // } else if (props.type == "status") {
  //   tableHeader.push({ label: "状态", prop: "status", width: 160, type: "slot" });
  // }

  handleQuery();
}

/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  list({ ...tableDatasObj.value.queryParams, id: props.id })
    .then((res) => {
      tableDatasObj.value.list = res.list;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置查询 */
function resetQuery(e: Event, formRef: FormInstance, data: Array<object>) {
  // 重置表单
  formRef.resetFields();
  // 查询
  tableDatasObj.value.paging.page = 1;
  tableDatasObj.value.paging.limit = 20;
  tableDatasObj.value.queryParams = { ...searchForm.value };
  const params = {
    ...tableDatasObj.value.queryParams,
    ...data,
    ...tableDatasObj.value.paging,
  };

  handleQuery(params);
}

init();

function handleStatusChange(val, obj, index) {
  let params = {
    ids: obj.id,
    status: val ? 1 : 2,
  };

  loading.value = true;
  pro_modify(params).then(() => {
    ElMessage.success("操作成功");

    handleQuery();
  });
}

function handleRateSave(val, obj, index) {
  let params = {
    ids: obj.id,
    // rate: val,
    rate: obj.rate,
  };

  loading.value = true;
  pro_modify(params).then(() => {
    ElMessage.success("操作成功");

    handleQuery();
  });
}

function handleRageChange(val, obj, index) {
  tableDatasObj.value.list[index].rate = val;
  tableDatasObj.value.list[index].isEdit = true;
}
</script>

<style lang="scss" scoped></style>
